Trang web Thời Trang Online [Full code web admin và client]

[Mã code 44900]
  1 Đánh giá    Viết đánh giá
 0      9      0
Phí tải: 200 Xu (1Xu = 1.000đ)
Danh mục
Thể loại
Nhóm code
Ngày đăng
08-9-2025
Loại file
Full code
Dung lượng
#
Code đã kiểm thử
Cam kết hỗ trợ
Không chứa mã độc
Có demo thực tế
Có hướng dẫn cài đặt

Cửa hàng thời trang mang đến những mẫu quần áo đẹp, hợp xu hướng với giá tốt, giúp bạn tự tin mặc đẹp mỗi ngày


MÔ TẢ CHI TIẾT

 Frontend cho website thương mại điện tử thời trang (banner “IVY MODA SALE…”), gồm duyệt sản phẩm, chi tiết sản phẩm, giỏ hàng, đặt hàng, quản lý tài khoản/đơn hàng.

  • Tech stack:
  • React 19, React Router 7 (SPA, nested routes)
  • Vite 7 (dev/build), Sass, Bootstrap 5 + bootstrap-icons
  • ESLint 9
  •  API/Server Node.js cho e-commerce mini (sản phẩm, danh mục, biến thể size/color, giỏ hàng, đơn hàng) kèm UI EJS để quản trị.

Stack: Express, MySQL (mysql2/promise, pool), EJS view engine, Multer (upload ảnh), JWT auth, Redis cache (tùy chọn).

Kiến trúc: Controller → Service → Repository (Clean-ish layers). Middleware cho auth, upload, 404, error. Cache theo key/TTL.

  • Proxy backend: vite.config.js chuyển tiếp '/api' và '/uploads' tới http://localhost:3000 (tránh CORS, dùng URL tương đối).

    Tính năng chính

    Trang tính năng chính

    pages/Home.jsx:

    Hiển thị Slider, danh sách “Sản phẩm mới” qua components/list-product.

    pages/product-detail.jsx:

    Tải chi tiết sản phẩm và biến thể.

    Nạp danh mục màu/size từ API; nếu lỗi, fallback vào dữ liệu sản phẩm.

    Suy luận variantId theo màu/size, kiểm soát số lượng theo tồn kho, thêm giỏ hàng (addToCart), hiển thị giá gốc/giảm.

    pages/cart.jsx:

    Tải giỏ hàng nếu đã đăng nhập; nếu chưa, hiển thị trống.

    Lấy chi tiết sản phẩm theo product_id để hiện tên/ảnh.

    Cập nhật số lượng với debounce, UI lạc quan; xóa item.

    Tính tổng; kiểm tra hợp lệ theo tồn kho; đặt hàng qua createOrder rồi điều hướng tới /user/orders.

    pages/orders.jsx:

    Liệt kê đơn của tôi, chuẩn hóa các field phổ biến (id, createdAt, status, total).

    pages/order-detail.jsx:

    Tải đơn hàng, map danh sách items + ảnh/tên sản phẩm (fetch thêm nếu thiếu), hiển thị địa chỉ giao hàng và tổng tiền; có thêm fetch getUserById để hiển thị địa chỉ tài khoản mặc định nếu có.

    pages/addresses.jsx:

    Lấy profile từ useOutletContext() của user-layout, render danh sách địa chỉ đã chuẩn hóa.

    pages/user-layout.jsx, pages/user-profile.jsx, components/UserSidebar.jsx: bố cục và thông tin người dùng (đã có khung).

    CSDL và khởi tạo (tự tạo bảng)

    Được tạo trong config/db.js khi khởi động:

    users (customer/admin)

    categories

    products

    sizes, colors (danh mục chuẩn)

    product_variants (size/color/stock/price theo sản phẩm, unique theo product-size-color)

    carts, cart_items (1 cart active/user)

    orders, order_items (order từ cart, giảm stock variant)

     

    Ràng buộc FK phù hợp, có transaction cho thay đổi nhạy cảm.


XEM THÊM ==> Hướng dẫn cài đặt chi tiết

 

HÌNH ẢNH DEMO

web,code web,client,code c,Full code web,code

web,code web,client,code c,Full code web,code

web,code web,client,code c,Full code web,code

web,code web,client,code c,Full code web,code

web,code web,client,code c,Full code web,code

web,code web,client,code c,Full code web,code

web,code web,client,code c,Full code web,code

Nguồn: Sharecode.vn



HƯỚNG DẪN CÀI ĐẶT

Backend

Chạy dự án

Cài đặt: npm install

Chạy: npm run dev (mặc định PORT 3000)

ENV chính:

DB: DB_HOST, DB_PORT, DB_USER, DB_PASSWORD, DB_NAME, DB_POOL_LIMIT

JWT: JWT_SECRET, JWT_EXPIRES_IN

Redis (tùy chọn): REDIS_URL hoặc REDIS_HOST, REDIS_PORT, REDIS_PASSWORD

 

Cache TTL (tùy chọn): CACHE_TTL_* theo nhóm products/categories/sizes/colors/orders

Frontend

Scripts:

npm run dev: chạy Vite (proxy tới backend http://localhost:3000 cho '/api' và '/uploads').

npm run build: build production.

npm run preview: xem trước build.

npm run lint: ESLint.

Yêu cầu backend RESTful phục vụ dưới prefix '/api/v1/*' tương thích các endpoint đã liệt kê.

 
 
LINK DOWNLOAD

# [#]

File đã được kiểm thử
     Báo vi phạm bản quyền
Pass giải nén (Nếu có):
sharecode.vn
DOWNLOAD
(200 Xu)
Bạn có code hay
ĐĂNG BÁN NGAY

BÌNH LUẬN



ĐÁNH GIÁ


ĐIỂM TRUNG BÌNH

5
1 Đánh giá
Code rất tốt (1)
Code tốt (0)
Code rất hay (0)
Code hay (0)
Bình thường (0)
Thành viên
Nội dung đánh giá
20:27 - 8/9/2025
Code rất tốt
Code rất tốt và phù hợp để phát triển

 HỖ TRỢ TRỰC TUYẾN